<template>
  <div class="group-table-box">
    <el-row class="group-top">
      <el-col :span="24" class="group-top">
        <div class="input-item input-flex">
          <span>活动名称：</span>
          <el-input
            v-model="form.groupName"
            placeholder="活动名称"
            style="width: 100px;"
            size="small"
          ></el-input>
        </div>

        <div class="input-item input-flex">
          <span>活动分类：</span>
          <el-input
            v-model="form.createName"
            placeholder="活动分类"
            style="width: 100px;"
            size="small"
          ></el-input>
        </div>

        <div class="input-item input-flex">
          <span>创建时间：</span>
          <el-date-picker
            v-model="form.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onClickDatePickerChange"
            size="small"
          >
          </el-date-picker>
        </div>

        <div class="input-item">
          <el-button
            type="primary"
            size="small"
            @click="onClickSearch"
          >搜索</el-button>
          <el-button
            type="warning"
            size="small"
            @click="onClickReset"
          >重置搜索</el-button>
        </div>
      </el-col>

      <el-col :span="6" class="group-right">
        <div class="input-item" style="margin-right: 0;">
          <el-button
            type="primary"
            size="small"
            @click="clickAddModal"
          >新增活动</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        :header-cell-class-name="'table-header'"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="问卷"
          align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="所属分类">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="200px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="check(scope.$index, scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="form.pageIndex"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="totalPageCount"
        style="text-align: center;margin-top: 20px;"
      >
      </el-pagination>
    </div>

    <!-- 点击新增问卷 -->
    <el-dialog
      :visible.sync="showAddModal"
    >
      <div class="modal-container">
        <div class="btn-top">
          <el-button type="primary" @click="addSingleQue">新增单选</el-button>
          <el-button type="primary" @click="addMultiQue">新增多选</el-button>
          <el-button type="primary" @click="addBlankQue">新增填空</el-button>
        </div>
        <el-form ref="formDynamic" :model="formDynamic">
          <!-- 单选 -->
          <el-form-item
            v-for="(item, index) in formDynamic.single"
            :key="'single' + index"
          >
            <el-row class="modal-row">
              <el-col :span="4" class="modal-label">
                <p>题目名称 {{ index + 1 }} </p>
                <p>（单选）</p>
              </el-col>
              <el-col :span="12">
                <el-input
                  type="text"
                  v-model="item.value"
                  placeholder="请输入..."
                  size="small"
                ></el-input>
              </el-col>
              <el-col :span="7" :offset="1" class="modal-btns">
                <i
                  class="el-icon-plus"
                  @click="addSingleOption(index)"
                ></i>
                <i
                  class="el-icon-minus"
                  @click="removeSingleOption(index)"
                ></i>
                <i
                  class="el-icon-delete"
                  @click="removeSingleQue(index)"
                ></i>
              </el-col>
            </el-row>
            <el-row
              class="modal-row"
              v-for="(itemOption, indexOption) in item.options"
              :key="'singleOpion' + indexOption"
            >
              <el-col :span="4" class="modal-label">
                <p>{{ itemOption.enIndex }} </p>
              </el-col>
              <el-col :span="12">
                <el-input
                  type="text"
                  v-model="indexOption.value"
                  placeholder="请输入..."
                  size="small"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <!-- 多选 -->
          <el-form-item
            v-for="(item, index) in formDynamic.multi"
            :key="'multi' + index"
          >
            <el-row class="modal-row">
              <el-col :span="4" class="modal-label">
                <p>题目名称 {{ index + 1 }} </p>
                <p>（多选）</p>
              </el-col>
              <el-col :span="12">
                <el-input
                  type="text"
                  v-model="item.value"
                  placeholder="请输入..."
                  size="small"
                ></el-input>
              </el-col>
              <el-col :span="7" :offset="1" class="modal-btns">
                <i
                  class="el-icon-plus"
                  @click="addMultiOption(index)"
                ></i>
                <i
                  class="el-icon-minus"
                  @click="removeMultiOption(index)"
                ></i>
                <i
                  class="el-icon-delete"
                  @click="removeMultiQue(index)"
                ></i>
              </el-col>
            </el-row>
            <el-row
              class="modal-row"
              v-for="(itemOption, indexOption) in item.options"
              :key="'multiOption' + indexOption"
            >
              <el-col :span="4" class="modal-label">
                <p>{{ itemOption.enIndex }} </p>
              </el-col>
              <el-col :span="12">
                <el-input
                  type="text"
                  v-model="indexOption.value"
                  placeholder="请输入..."
                  size="small"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <!-- 填空 -->
          <el-form-item
            v-for="(item, index) in formDynamic.blank"
            :key="'blank' + index"
          >
            <el-row class="modal-row">
              <el-col :span="4" class="modal-label">
                <p>题目名称 {{ index + 1 }} </p>
                <p>（填空）</p>
              </el-col>
              <el-col :span="12">
                <el-input
                  type="text"
                  v-model="item.value"
                  placeholder="请输入..."
                  size="small"
                ></el-input>
              </el-col>
              <el-col :span="7" :offset="1" class="modal-btns">
                <i
                  class="el-icon-delete"
                  @click="removeBlankQue(index)"
                ></i>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <div slot="footer" class="modal-footer">
          <el-button type="primary" @click="onClickQuestionConfirm">完成</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showAddModal: false,
      isLoading: false,
      form: {
        pageIndex: 1,
      },
      totalPageCount: 10,
      tableData: [{
        groupStatusText: '123123'
      }],
      checkReturnData: {
      },
      // quesIndex: 1,
      formDynamic: {
        single: [],
        multi: [],
        blank: []
      }
    }
  },
  mounted() {
    this.getTableData();
  },
  watch: {
  },
  methods: {
    onClickSearch() {

    },
    onClickReset() {

    },
    clickAddModal() {
      // 点击新增问卷
      this.formDynamic = {
        single: [],
        multi: [],
        blank: []
      }
      this.showAddModal = true
    },
    onClickDeleteConfirm() {

    },
    delete() {

    },
    check(index) {

    },
    addSingleQue() {
      // 点击添加单选问题
      // this.quesIndex ++
      this.formDynamic.single.push({
        value: '',
        // index: this.quesIndex,
        options: [{
          value: '',
          index: 0,
          enIndex: 'A'
        }]
      });
    },
    addMultiQue() {
      // 点击添加多选问题
      // this.quesIndex ++
      this.formDynamic.multi.push({
        value: '',
        // index: this.quesIndex,
        options: [{
          value: '',
          index: 0,
          enIndex: 'A'
        }]
      });
    },
    addBlankQue() {
      // 点击添加单选问题
      // this.quesIndex ++
      this.formDynamic.blank.push({
        value: ''
      });
    },
    removeSingleQue (index) {
      // 点击删除单选问题
      this.formDynamic.single = this.removeArr(this.formDynamic.single, index)
      this.formDynamic.single.push()
    },
    addSingleOption(index) {
      // 点击添加单选问题的选项
      let arr = this.formDynamic.single[index].options
      arr.push({
        value: '',
        index: arr.length + 1,
        enIndex: String.fromCharCode(65 + arr.length)
      });
      this.formDynamic.single[index].options = arr
      this.formDynamic.single.push()
    },
    removeSingleOption(index, optionIndex) {
      // 点击删除单选问题的选项
      let arr = this.formDynamic.single[index].options
      if(arr.length <= 1) {
        return
      }
      this.formDynamic.single[index].options = this.removeArr(arr, optionIndex)
      this.formDynamic.single.push()
    },
    removeMultiQue (index) {
      // 点击删除单选问题
      this.formDynamic.multi = this.removeArr(this.formDynamic.multi, index)
      this.formDynamic.multi.push()
    },
    addMultiOption(index) {
      // 点击添加单选问题的选项
      let arr = this.formDynamic.multi[index].options
      arr.push({
        value: '',
        index: arr.length + 1,
        enIndex: String.fromCharCode(65 + arr.length)
      });
      this.formDynamic.multi[index].options = arr
      this.formDynamic.multi.push()
    },
    removeMultiOption(index, optionIndex) {
      // 点击删除单选问题的选项
      let arr = this.formDynamic.multi[index].options
      if(arr.length <= 1) {
        return
      }
      this.formDynamic.multi[index].options = this.removeArr(arr, optionIndex)
      this.formDynamic.multi.push()
    },
    removeBlankQue (index) {
      // 点击删除单选问题
      this.formDynamic.blank = this.removeArr(this.formDynamic.blank, index)
      this.formDynamic.blank.push()
    },
    onClickQuestionConfirm() {
      // 新增问卷的确定按钮
    },
    getTableData(index) {

    },
    onClickDatePickerChange(e) {
      // ["2018-08-07", "2018-09-12"]
      // this.form.date = e;
    },
    removeArr(array, index) {
      if(index <= (array.length - 1)) {
        for(let i = index; i < array.length; i ++) {
          array[i] = array[i + 1]
          if(array[i]) {
            array[i].index = i + 1
          }
        }
      }
      array.length = array.length - 1
      // this.quesIndex = array.length
      return array;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-flex {
  display: inline-flex !important;
  flex-direction: column;
}
.pull-right {
  float: right;
}
.group-top {
  display: flex;
  align-items: flex-end;
}
.group-right {
  display: flex;
  justify-content: flex-end;
}
.input-item {
  display: inline-block;
  margin: 0 20px 20px 0;
  color: #000;
  font-size: 12px;
}
.input-btn {
  margin-right: 10px;
}
.table-container-page {
  text-align: center;
  margin-top: 20px;
  color: #000;
}
.btn-top {
  margin-bottom: 20px;
}
.btn-top button {
  margin-right: 25px;
}
.modal-label {
  text-align: center;
  line-height: 20px;
}
.modal-row {
  display: flex;
  align-items: center;
}
.modal-btns i {
  font-size: 24px;
  margin-right: 4px;
  cursor: pointer;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
</style>
